<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
vue指令
带有v-前缀的特殊标签属性,不同属性对应不同的功能

v-html 设置元素的innerHtml
v-show 控制元素的显示与隐藏
v-if 控制元素元素的显示与隐藏（条件渲染）
-->

<body>
    <div id="app">
        <div v-html="message"></div>
        <p>{{message}}</p>

        <div v-show="showTip">这是 v-show 的盒子</div>
        <div v-if="ifTip">这是 v-if 的盒子,如果为false不会渲染出来</div>

    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '<a href = "http://www.itheima.com">黑马程序员</a>',
                // 为false时 display：none
                showTip: false, 
                ifTip: true
            }
        })
    </script>

</body>

</html>